<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>03-点名系统.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        padding: 20px;
      }

      h1 {
        padding: 10px;
        background-color: #9acd32;
        color: purple;
        margin: 10px 0;
      }

      button {
        width: 100px;
        height: 50px;
        border-radius: 25px;
        background-color: #9acd32;
        color: #fff;
        border: none;
        font-size: 20px;
      }

      ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
      }

      li {
        width: 100px;
        height: 40px;
        background-color: #000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px;
      }

      /* 在随机抽取的过程中被选中的 */
      .active {
        background-color: #9acd32;
        color: #fff;
      }

      /* 确定下来了 最终被选中 */
      .select {
        background-color: palevioletred;
        color: #fff;
      }
    </style>
  </head>

  <body>
    <h1>被选中的小伙伴们:</h1>
    <button>开始</button>
    <ul>
      <li class="">张三</li>
      <li class="active">李四</li>
      <li class="select">王五</li>
    </ul>
    <script>
      // 定义数据
      const data = [
        "陈学文",
        "董铠诚",
        "李燕",
        "钟俊源",
        "梁湛枝",
        "符高满",
        "郑遥",
        "何卓杭",
        "周宇轩",
        "向虹霓",
        "朱志通",
        "王友滨",
        "吴烜嘉",
        "郭嘉豪",
        "许文龙",
        "莫远鹏",
        "赖秋燕",
        "赖嘉晖",
        "王木旺",
        "李耀艳",
        "张宜",
        "林丽转",
        "李春丽",
        "岑业荣",
        "郑俊鑫",
        "吴道纪",
        "曹梦飞",
        "陈桂玲",
        "蔡亲行",
        "陈冬桦",
        "廖任登",
        "蒋林池",
        "苏文彬",
        "梅婷婷",
        "李明",
        "李佳惠",
        "李知锋",
        "张成",
        "黎扬",
        "苏雄",
        "李豪",
        "钟文",
        "黎长",
        "余建",
        "杨青",
        "王益",
        "吴科",
        "杨鑫",
        "黄敬",
        "袁震霆",
      ];
      // 获取元素
      const ul = document.querySelector("ul");
      const start = document.querySelector("button");
      const h1 = document.querySelector("h1");
      // 渲染列表
      function render() {
        const arr = data.map((item) => {
          return `<li class="">${item}</li>`;
        });
        ul.innerHTML = arr.join("");
      }
      render();

      // 点击开始注册事件
      // 开启定时器开关
      let flag = true;
      // 注册事件
      start.addEventListener("click", () => {
        // 获取未选中的节点
        const noSelect = document.querySelectorAll("ul li:not(.select)");
        // 选中的下标
        let selsetNum;
        // 时间限制停止
        let num = 0;
        if (flag) {
          let timer = setInterval(() => {
            if (num < 5) {
              // num++
              num++;
              // 选取随机数
              let i = Math.floor(Math.random() * noSelect.length);
              selsetNum = i;
              // 排他
              document.querySelector(".active") &&
                document.querySelector(".active").classList.remove("active");
              // 添加active类
              noSelect[i].classList.add("active");
              // 关掉开关
              flag = false;
            } else {
              // 加select类
              noSelect[selsetNum].classList.add("select");
              // 显示名字
              h1.innerText = noSelect[selsetNum].innerText;
              // 清除定时器
              clearInterval(timer);
              // 开启开关
              flag = true;
            }
          }, 100);
        }
      });
    </script>
  </body>
</html>
